<template>
  <div style="width: 100%">
    <p>
      <el-button size="medium" :disabled="disabled" type="primary"
                 @click="$refs['gdcd'].open(selection)">选择已有的
      </el-button>
      <el-button size="medium" :disabled="disabled" type="danger" @click="resetForm()">清空</el-button>
    </p>
    <div class="config">
      <el-col :span="2">大版本：</el-col>
      <el-col :span="8">
        <span>前缀</span>
        <el-input :disabled="disabled" size="medium" v-model="formData.big_version.prefix"></el-input>
      </el-col>
      <el-col :span="6">
        <span class="l4">自增初值</span>
        <el-input :disabled="disabled" size="medium" v-model="formData.big_version.sequence"></el-input>
      </el-col>
      <el-col :span="8">
        <span>后缀</span>
        <el-input :disabled="disabled" size="medium" v-model="formData.big_version.suffix"></el-input>
      </el-col>

      <el-col :span="2">分隔符：</el-col>
      <el-col :span="22">
        <el-select :disabled="disabled" size="medium" v-model="formData.separator"></el-select>
      </el-col>

      <el-col :span="2">小版本：</el-col>
      <el-col :span="8">
        <span>前缀</span>
        <el-input :disabled="disabled" size="medium" v-model="formData.small_version.prefix"></el-input>
      </el-col>
      <el-col :span="6">
        <span class="l4">自增初值</span>
        <el-input :disabled="disabled" size="medium"
                  v-model="formData.small_version.sequence"></el-input>
      </el-col>
      <el-col :span="8">
        <span>后缀</span>
        <el-input :disabled="disabled" size="medium" v-model="formData.small_version.suffix"></el-input>
      </el-col>
    </div>
    <get-data-common-dialog title="选择已有版本规则"
                            ref="gdcd"
                            :limit="1"
                            :column="column"
                            :source-data="settingsJson"
                            @addToList="addToList">
    </get-data-common-dialog>
  </div>
</template>
<script>
import GetDataCommonDialog from "@/views/DMDComponent/getDataCommonDialog.vue";

export default {
  name: "versionRules",
  components: {GetDataCommonDialog},
  inject: ["dialogType"],
  props: {
    item: {
      type: String,
      default: () => {
        return ""
      }
    },
    allFormData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      selection: [],
      formData: {
        "big_version": {
          "prefix": "",
          "sequence": "",
          "suffix": ""
        },
        "separator": "",
        "small_version": {
          "prefix": "",
          "sequence": "",
          "suffix": ""
        },
        interfaceId: ""
      },
      column: [
        {
          label: "大版本前缀",
          prop: "big_version-prefix",
          formatter: (val) => {
            return val.settingsJson.big_version.prefix
          }
        },
        {
          label: "大版本自增序列",
          prop: "big_version-sequence",
          formatter: (val) => {
            return val.settingsJson.big_version.sequence
          }
        },
        {
          label: "大版本后缀",
          prop: "big_version-suffix",
          formatter: (val) => {
            return val.settingsJson.big_version.suffix
          }
        },

        {label: "分隔符", prop: "separator"},

        {
          label: "小版本前缀",
          prop: "small_version-prefix",
          formatter: (val) => {
            return val.settingsJson.small_version.prefix
          }
        },
        {
          label: "小版本自增序列",
          prop: "small_version-sequence",
          formatter: (val) => {
            return val.settingsJson.small_version.sequence
          }
        },
        {
          label: "小版本后缀",
          prop: "small_version-suffix",
          formatter: (val) => {
            return val.settingsJson.small_version.suffix
          }
        },
      ]
    }
  },
  computed: {
    settingsJson() {
      let interfaceSettings = this.deepCopy(this.item.interfaceSettings)
      if (this.item.interfaceSettings && this.item.interfaceSettings.length > 0) {
        interfaceSettings.forEach(item => {
          item.settingsJson = JSON.parse(item.settingsJson);
          Object.assign(item, {interfaceId: this.item.interfaceId});
        })
      }

      let {step4, saveStep4, functionInterfaces} = this.allFormData();
      if (functionInterfaces && functionInterfaces.length > 0) {
        functionInterfaces.forEach(item => {
          if (item.oid === this.item.interfaceId) {
            let form = saveStep4 ? step4 : (item.settingsJson ? Object.assign(JSON.parse(item.settingsJson), {interfaceId: this.item.interfaceId}) : {});

            Object.assign(this.formData, form)
          }
        })
      }
      return interfaceSettings;
    },
    disabled() {
      return this.dialogType() === 'view';
    }
  },
  methods: {
    resetForm() {
      this.formData = {
        "big_version": {
          "prefix": "",
          "sequence": "",
          "suffix": ""
        },
        "separator": "",
        "small_version": {
          "prefix": "",
          "sequence": "",
          "suffix": ""
        }
      }
    },
    addToList(data) {
      this.selection = this.deepCopy(data);
      Object.assign(this.formData, data[0].settingsJson)

      this.$refs["gdcd"].close();
    },

    getData() {
      let form = this.deepCopy(this.formData)
      let obj = {
        interfaceId: this.item.interfaceId,
        settingsJson: JSON.stringify(form)
      }
      return {data: [obj], isNull: !form.interfaceId, flag: true};
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.config {
  height: 200px;

  .el-col {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 36px;
    line-height: 36px;
    font-size: 12px;

    > span {
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: right;
      padding-right: 10px;
      font-size: 12px;
    }

    .l4 {
      width: 100px;
    }
  }
}
</style>
